<template>
    <div class="singleVideo">
        <div class="wrapper">
            <div class="on" v-if="videoInfo">
                <div class="player">
                    <ali-player-v2
                            ref="AliPlayerV2"
                            class="ali-player-v2"
                            :source="videoInfo.pullUrl"
                            :options="playerOptions"
                    />
                    <div class="flyerInfo">
                        <ul class="data">
                            <li>
                                <span>高度</span>
                                <span>{{videoInfo.height}}</span>
                            </li>
                            <li>
                                <span>速度</span>
                                <span>{{videoInfo.verticalSpeed}}</span>
                            </li>
                            <li>
                                <span>电池电量</span>
                                <span>{{videoInfo.remainPercent}}</span>
                            </li>
                        </ul>
                        <div class="image">
                            <img src="@/assets/images/qpck@2x.png" alt="全屏显示" title="全屏显示" @click="fullScreen">
                            <img v-if="!isRecording" src="@/assets/images/kszb@2x.png" alt="开始录制" title="开始录制"
                                 @click="startRecord">
                            <img v-if="isRecording" src="@/assets/images/stop.png" alt="取消录制" title="取消录制"
                                 @click="cancelRecord" class="cancelRecord">
                            <img src="@/assets/images/qxzb2x.png" alt="取消直播" title="取消直播" @click="cancelVideo">
                        </div>
                    </div>
                    <div class="recording" v-if="isRecording">
                        <img src="@/assets/images/red.png">
                        <span>录制中</span>
                    </div>
                </div>
                <ul>
                    <li>视频{{videoIndex+1}}</li>
                    <li>{{videoInfo.userName}}</li>
                    <li>{{videoInfo.droneName}}</li>
                    <li>直播中</li>
                </ul>
            </div>
            <div class="off" v-else>
                <img src="@/assets/images/video-bc.png" alt="背景图片未显示">
                <ul>
                    <li>视频{{videoIndex+1}}</li>
                    <li>空闲</li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
	import AliPlayerV2 from 'vue-aliplayer-v2'

	export default {
		name: 'SingleVideo',
		components: {
			AliPlayerV2,
		},
		props: {
			videoInfo: {
				type: Object
			},
			videoIndex: {
				require: true,
				default: 0,
				type: Number
			},
		},
		data() {
			return {
				isRecording: false,
			}
		},
		watch: {
			videoInfo: {
				handler(newV, oldV) {
					console.log(`新数据 ${newV.remainPercent}`)
					console.log(oldV)
				},
				deep: true
			}
		},
		created() {
			this.isRecording = false
			this.width = document.body.clientWidth
		},
		methods: {
			// 全屏显示
			fullScreen() {
				this.$refs['AliPlayerV2'].requestFullScreen()
			},
			// 点击播放（测试播放情况）
			playVideoInfo() {
				this.$refs['AliPlayerV2'].play()
			},
			// 点击取消直播
			cancelVideo() {
				this.isRecording = false
				this.$refs['AliPlayerV2'].dispose() // 销毁播放器
				this.$emit('cancelVideo', {
					index: this.videoIndex,
					id: this.videoInfo.id
				})
			},
			// 点击开始录制
			startRecord() {
				this.isRecording = true
				this.$emit('startRecord', {
					id: this.videoInfo.id,
					index: this.videoIndex
				})
			},
			// 点击取消录制
			cancelRecord() {
				this.isRecording = false
				this.$emit('cancelRecord', {
					id: this.videoInfo.id,
					index: this.videoIndex
				})
			}
		},
		computed: {
			playerOptions() {
				return {
					//播放器的高度比区域高7px
					isLive: true,
					width: '100%',
					height: '100%'
				}
			},
		}
	}
</script>

<style scoped lang="scss">
    @import "src/style/singleVideo";
</style>
